<template>
    <div class="list">
        <table class="table">
            <thead class="thead">
                <tr>
                    <th v-text="Lang.title[lang][0]"></th>
                    <th v-text="Lang.title[lang][1]"></th>
                    <th>
                        <span v-text="Lang.title[lang][2]"></span>
                    </th>
                    <th>
                        <span v-text="Lang.title[lang][3]"></span>
                    </th>
                </tr>
            </thead>
            <tbody class="tbody">
                <tr align="center"
                    v-for="(v, index) in recordTransaction"
                    :key="index">
                    <td v-text="v.date">11:01:05</td>
                    <td v-text="v.jytype==1?Lang.title[lang][5]:Lang.title[lang][4]">11:01:05</td>
                    <td v-text="v.price">11:01:05</td>
                    <td v-text="v.count">11:01:05</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import {vpost, vlink} from '@api'
import Lang from './lang.js'
export default {
	name: 'list',
	data() {
		return {
            Lang,
            recordTransaction: [],
            timing:'',
		}
	},
	methods: {
		init() {
			this.recordTransaction = this.$store.state.trade.recordTransaction
		},
    },
    computed:{
        lang(){
            return this.$store.state.setting.lang
        }
    },
	mounted() {
		this.timing = setInterval(() => {
			this.init()
		}, 0.5 * 1000)
    },
    destroyed(){
        clearInterval(this.timing)
        this.timing=null
    }
}
</script>

<style scoped>
.table {
	width: 100%;
}
.thead {
	font-weight: 0;
	font-size: 16px;
	color: #61688a;
}
.tbody {
	color: #c7cce6;
	font-size: 13px;
}
</style>
